<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改密码"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    class="change-pwd-dialog"
    :destroy-on-close="true"
    :before-close="beforeClose"
  >
    <template #header="{}">
      <div class="my-header">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="原始密码" name="password"> </el-tab-pane>
          <el-tab-pane label="手机验证码" name="phone"></el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <div v-show="activeName == 'password'">
      <el-form ref="changePwdRef" :model="form" :label-width="100" :rules="formRules">
        <el-form-item label="原始密码" prop="password">
          <el-input v-model.trim="form.password" show-password autocomplete="new-password"> </el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword" required>
          <el-input v-model.trim="form.newPassword" show-password maxlength="20"> </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" required>
          <el-input maxlength="20" v-model.trim="form.confirmPassword" show-password> </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="activeName == 'phone'">
      <PhoneCode
        :submit-api="SystemApi.updatePwdByPhone"
        :send-code-api="SystemApi.sendSmsCode"
        :send-code-scene="3"
        type="password"
        ref="PhoneCodeRef"
      ></PhoneCode>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="beforeClose">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance } from "element-plus";
import { ref, watch } from "vue";
import PhoneCode from "@/components/PhoneCode/index.vue";
import { SystemApi } from "@/api/modules";

const changePwdRef = ref<FormInstance>();
const PhoneCodeRef = ref<InstanceType<typeof PhoneCode> | null>(null);
const activeName = ref("password");

const form = ref({
  password: "",
  newPassword: "",
  confirmPassword: "",
});
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入新密码"));
  } else {
    const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[A-Za-z0-9]{8,20}$/;
    if (!regexp.test(value)) {
      return callback(new Error("密码由8-20位大小写字母和数字组成"));
    }
    if (form.value.confirmPassword !== "") {
      if (!changePwdRef.value) return;
      changePwdRef.value.validateField("confirmPassword", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入确认密码"));
  } else if (value !== form.value.newPassword) {
    callback(new Error("两次输入不一致!"));
  } else {
    callback();
  }
};
const formRules = {
  newPassword: [
    { validator: validatePass, trigger: "blur" },
    { required: true, trigger: "blur", message: "请输入新密码" },
  ],
  confirmPassword: [
    { validator: validatePass2, trigger: "blur" },
    { required: true, trigger: "blur", message: "请输入确认密码" },
  ],
  password: [{ required: true, trigger: "blur", message: "请输入原始密码" }],
};

const beforeClose = () => {
  dialogVisible.value = false;
};
const dialogVisible = ref(false);
watch(dialogVisible, () => {
  changePwdRef.value?.resetFields();
  PhoneCodeRef.value?.phoneFormRef?.resetFields();
});
watch(activeName, () => {
  changePwdRef.value?.resetFields();
  PhoneCodeRef.value?.phoneFormRef?.resetFields();
});
const openDialog = () => {
  dialogVisible.value = true;
};
const submit = () => {
  if (activeName.value == "phone") {
    PhoneCodeRef.value?.submit().then(() => {
      dialogVisible.value = false;
    });
  }
  if (activeName.value == "password") {
    changePwdRef.value?.validate(valid => {
      if (valid) {
        const params = {
          newPwd: form.value.newPassword,
          oldPwd: form.value.password,
        };
        SystemApi.updatePwd(params).then(res => {
          if (res.code == 200) {
            ElMessage.success("修改成功");
            dialogVisible.value = false;
          }
        });
      }
    });
  }
};

defineExpose({ openDialog });
</script>
<style lang="scss">
.change-pwd-dialog.el-dialog {
  .el-dialog__header {
    padding-bottom: 0;
    border-bottom: none;
  }
}
</style>
